<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

    <meta charset="UTF-8">
    <title>Title</title> <style type="text/css">
    table {border-collapse: collapse; font-size: 14px;
        width: 80%; margin: auto}
    table, th, td {border: 0px solid darkslategray;padding: 10px}
    body{
        background: url("https://pic2.zhimg.com/3ae866e7992a94069c7e0c417aac807d_r.jpg") no-repeat;
        background-size: 100%
    }
    .btgn{
        font-family: 仿宋;
        font-size: 16px;
        color: black;
        background-color: #99CCFF;
        text-align: center;
    }

    tr:nth-child(2n){
        background-color:white;
    }
    tr:nth-child(2n+1) {
        background-color: gainsboro;
    }


</style>
</head>
<body>
<div style="text-align: center">
    <span class="span" style="color: green; font-size: 25px">书籍首页</span>
    <br/>
    <table class="list">
        <tr>
            <th class="btgn">id</th>
            <th class="btgn">用户名</th>
            <th class="btgn"> 密码</th>
            <th class="btgn"> 联系方式</th>
            <th class="btgn"> 年龄</th>
            <th class="btgn"> 操作</th>


        </tr>
        <tr th:each="user : ${all}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.phone}"></td>
            <td th:text="${user.age}"></td>
            <td><a th:href="@{'/deleteId/'+${user.id}}"><button class="btn btn-danger">删除用户</button></a>
                <a th:href="@{'/updateUser/'+${user.id}}"><button class="btn btn-primary">修改用户</button></a>
            </td>

        </tr>
    </table>
</div>
</body>
</html>